.enter_container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('/assets/images/homepage/enter/bg.gif') !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .enter_homepage {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 5%;

        ._enter_row1 {
            height: 302px;
            height: 302px;
            display: flex;
            justify-content: space-around;
            width: 1295px;

            ._row1_item {
                width: 639px;
                height: 266px;
                // opacity: 0.8;
                background: url('/assets/images/homepage/enter/row1.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row1_item:hover {
                width: 639px;
                height: 266.6px;
                background: url('/assets/images/homepage/enter/row1-select.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item {
                width: 639px;
                height: 266px;
                // opacity: 0.8;
                background: url('/assets/images/homepage/enter/row1-2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item:hover {
                width: 639px;
                height: 266.6px;
                background: url('/assets/images/homepage/enter/row1-2-select.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }

        ._enter_row2 {
            height: 427px;
            display: flex;
            width: 100%;
            justify-content: space-between;
            width: 1448px;
            padding-right: 156px;

            ._row2_item1 {
                width: 409px;
                height: 384px;
                // opacity: 0.8;
                background: url('/assets/images/homepage/enter/row2-1.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item1:hover {
                background: url('/assets/images/homepage/enter/row2-1-select.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item2 {
                width: 409px;
                height: 384px;
                // opacity: 0.8;
                background: url('/assets/images/homepage/enter/row2-2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item2:hover {
                background: url('/assets/images/homepage/enter/row2-2-select.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item3 {
                width: 409px;
                height: 384px;
                // opacity: 0.8;
                background: url('/assets/images/homepage/enter/row2-3.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }

            ._row2_item3:hover {
                background: url('/assets/images/homepage/enter/row2-3-select.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }

        ._enter_title {
            position: absolute;
            top: 4%;
            left: 3%;
            width: 378px;
            height: 88px;
            background: url('/assets/images/homepage/enter/title.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        ._title {
            width: 100%;
            height: 88px;
            background: url('/assets/images/homepage/bigscreen/top.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        ._exit {
            position: absolute;
            right: 60px;
            top: 38px;
            cursor: pointer;
            color: #C8F0FF;
            display: flex;

            ._icon {
                display: inline-block;
                width: 28px;
                height: 28px;
                background: url('/assets/images/homepage/bigscreen/exit.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-right: 3px;
            }
        }

        .homepage-left {
            width: 21.8%;
            height: 89.6%;
            position: absolute;
            top: 8.2%;
            z-index: 300;
        }

        .homepage-center {
            width: 49.16%;
            height: 89.6%;
            position: absolute;
            bottom: 2.4%;
            left: 25.5%;
            padding-left: 16px;
            padding-right: 16px;
            z-index: 400;

            ._top {
                margin-top: 5%;
                height: calc(100% - 200px);
                background: url('/assets/images/homepage/bigscreen/centerbg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: relative;
            }
        }

        .homepage-left-left {
            left: 48px;
        }

        .homepage-left-right {
            right: 48px;
        }

    }

}



.list {
    list-style: none;
    height: 100%;
}

.list .child {
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(-300px);
    animation: show .5s forwards;
}

.list .child.show {
    animation-delay: 0s !important;
}

.list .child.hide {
    opacity: 1;
    transform: translateX(0);
    animation-name: hide;
    animation-delay: 0s;
}

/*animation-delay*/
.list .child:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}

.list .child:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}

.list .child:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}

.list .child:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}

.list .child:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}

.list .child-right {
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(300px);
    animation: show .5s forwards;
}

.list .child-right.show {
    animation-delay: 0s !important;
}

.list .child-right.hide {
    opacity: 1;
    transform: translateX(0);
    animation-name: hide;
    animation-delay: 0s;
}

/*animation-delay*/
.list .child-right:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}

.list .child-right:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}

.list .child-right:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}

.list .child-right:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}

.list .child-right:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}

.list .child-top {
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(300px);
    animation: show 1s forwards;
}

.list .child-top.show {
    animation-delay: 0s !important;
}

.list .child-top.hide {
    opacity: 1;
    transform: translateY(0);
    animation-name: hide;
    animation-delay: 0s;
}


@keyframes show {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hide {
    to {
        opacity: 0;
        transform: translateX(100px);
        max-height: 0;
        margin: 0;
    }
}

.center-card-title {
    height: 31px;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    margin-top: 5px;

    ._icon_left {
        width: 32px;
        height: 17px;
        background: url('/assets/images/homepage/bigscreen/center-left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 11px;
        margin-left: 10px;
    }

    ._icon_right {
        width: 32px;
        height: 17px;
        background: url('/assets/images/homepage/bigscreen/center-right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 11px;
        margin-left: 10px;
    }
}